<script setup>
import { Sunny, Moon, Fold, Expand, House, InfoFilled, Cpu } from '@element-plus/icons-vue'
import { RouterView, useRouter } from 'vue-router'  // 添加useRouter导入
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'  // 添加路由导入

const router = useRouter()  // 获取路由实例
const isDark = ref(false)
const isCollapse = ref(false)

const toggleMenu = () => {
  isCollapse.value = !isCollapse.value
}

const toggleTheme = () => {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
}

// 添加路由跳转方法
const navigateTo = (path) => {
  router.push(path)
}

onMounted(() => {
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
  isDark.value = prefersDark.matches
  document.documentElement.classList.toggle('dark', isDark.value)
})

const route = useRoute()
const activeMenuIndex = computed(() => {
  // 使用路由路径作为index，直接匹配
  return route.path
})
</script>

<template>
  <el-container class="layout-container">
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <el-menu :collapse="isCollapse" collapse-transition router :default-active="activeMenuIndex">
        <el-menu-item index="/" @click="navigateTo('/')">
          <el-icon>
            <House />
          </el-icon>
          <template #title>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-sub-menu index="/algorithm">
          <template #title>
            <el-icon>
              <Cpu />
            </el-icon>
            <span>基础算法</span>
          </template>
          <el-sub-menu index="/algorithm/sort">
            <template #title>
              <span>排序算法</span>
            </template>
            <el-menu-item index="/bubble-sort" @click="navigateTo('/bubble-sort')">
              <template #title>
                <span>冒泡排序</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/quick-sort" @click="navigateTo('/quick-sort')">
              <template #title>
                <span>快速排序</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/insertion-sort" @click="navigateTo('/insertion-sort')">
              <template #title>
                <span>插值排序</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/merge-sort" @click="navigateTo('/merge-sort')">
              <template #title>
                <span>归并排序</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/heap-sort" @click="navigateTo('/heap-sort')">
              <template #title>
                <span>堆排序</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="/about" @click="navigateTo('/about')">
          <el-icon>
            <InfoFilled />
          </el-icon>
          <template #title>
            <span>关于</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header>
        <div class="header-content">
          <el-button class="menu-toggle" :icon="isCollapse ? Expand : Fold" circle @click="toggleMenu" />
          <el-button class="theme-toggle" :icon="isDark ? Sunny : Moon" circle @click="toggleTheme" />
        </div>
      </el-header>
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
/* 全局菜单样式 */
.el-menu {
  background-color: var(--color-background-mute) !important;
  border-right: none !important;
}

/* 添加选中菜单项样式 */
.el-menu-item.is-active {
  background-color: var(--color-background-soft) !important;
  color: var(--el-color-primary) !important;
}

.el-sub-menu.is-active>.el-sub-menu__title {
  color: var(--el-color-primary) !important;
}

.el-menu-item {
  color: var(--color-text) !important;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.el-menu-item .el-icon {
  margin-right: 8px;
}

.el-menu-item:hover {
  background-color: var(--color-background-soft) !important;
}

.el-sub-menu__title {
  color: var(--color-text) !important;
}
</style>

<style scoped>
.layout-container {
  width: 100vw;
  height: 100vh;
}

.el-header {
  background-color: var(--color-background-soft);
  color: var(--color-text);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-toggle {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: var(--vt-c-indigo);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.theme-toggle {
  padding: 8px 16px;
  background-color: var(--vt-c-indigo);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.menu-toggle:hover,
.theme-toggle:hover {
  background-color: var(--vt-c-indigo);
  opacity: 0.8;
}

.el-aside {
  background-color: var(--color-background-mute);
  color: var(--color-text);
  transition: all 0.3s ease;
}

.el-main {
  padding: 20px;
}
</style>
